<template>
  <layout>
    <template #header>
      <pageHead title="我的钱包" />
    </template>
    <view class="content">
      <view class="brief">
        <view class="name c-60 fs-28">余额（元）</view>
        <view class="money bold c-90">{{ asset.balance || 0 }}</view>
        <view @click="toDrawCash" class="active-btn fs-32">立即提现</view>
        <image class="coin" src="../../../assets/images/icons/coin.png"></image>
        <view @click="toHistory" class="history flex flex-a">
          <text class="fs-28 c-60">提现记录</text>
          <image src="../../../assets/images/icons/arrow-right.png" style="width:32rpx;height:32rpx;opacity: 0.6;"></image>
        </view>
      </view>
      <view class="list">
        <view class="item">
          <view class="num orange">{{ asset.balance || 0 }}</view>
          <view class="name c-60 fs-24">可提现金额（元）</view>
        </view>
        <view class="item">
          <view class="num active-text">{{ asset.cashingMoney || 0 }}</view>
          <view class="name c-60 fs-24">提现中（元）</view>
        </view>
      </view>
      <view class="list">
        <view class="item">
          <view class="num c-90">{{ asset.alreadyCashMoney || 0 }}</view>
          <view class="name c-60 fs-24">已提现金额（元）</view>
        </view>
        <view class="item">
          <view class="num c-40">{{ asset.freezedMoney || 0 }}</view>
          <view class="name c-60 fs-24">冻结中资金（元）</view>
        </view>
      </view>
      <view class="func">
        <view @click="toOrders(1)" class="item flex flex-bt flex-a">
          <view class="flex flex-a">
            <image
              class="icon"
              src="../../../assets/images/wallet/done.png"
            ></image>
            <view class="name c-60 fs-28">已结算订单</view>
          </view>
          <image
            class="arrow"
            src="../../../assets/images/icons/arrow-right.png"
          ></image>
        </view>
        <view @click="toOrders(2)" class="item flex flex-bt flex-a">
          <view class="flex flex-a">
            <image
              class="icon"
              src="../../../assets/images/wallet/wait.png"
            ></image>
            <view class="name c-60 fs-28">待结算订单</view>
          </view>
          <image
            class="arrow"
            src="../../../assets/images/icons/arrow-right.png"
          ></image>
        </view>
        <view @click="toAdd" class="item flex flex-bt flex-a">
          <view class="flex flex-a">
            <image
              class="icon"
              src="../../../assets/images/wallet/add.png"
            ></image>
            <view class="name c-60 fs-28">添加收款账户</view>
          </view>
          <image
            class="arrow"
            src="../../../assets/images/icons/arrow-right.png"
          ></image>
        </view>
      </view>
    </view>
  </layout>
</template>
<script>
import layout from "../../../compennts/layout/index.vue";
import pageHead from "../../../compennts/pageHead/index.vue";
import { getLocalUserInfo } from "../../../assets/utils/index";
import { getAccountList } from "../../../api/setting/index";
import { getUserInfo } from "../../../api/auth";
export default {
  components: {
    layout,
    pageHead,
  },
  data() {
    return {
      userinfo: null,
      asset: {},
      list: [],
    };
  },
  created() {
    this.userinfo = getLocalUserInfo();
    this.asset = this.userinfo.asset;
  },
  onShow() {
    uni.showLoading({
      mask: true,
    });
    this.getBalance()
    getAccountList()
      .then((res) => {
        this.list = res.data;
      })
      .finally(() => {
        uni.hideLoading();
      });
  },
  methods: {
    getBalance() {
      let token = uni.getStorageSync("token");
      if (!token) return (this.userinfo = {});
      this.userinfo = getLocalUserInfo();
      this.asset = this.userinfo.asset || {};
      getUserInfo().then((res) => {
        console.log(res);
        uni.setStorageSync("userInfo", JSON.stringify(res.data));
        this.userinfo = res.data;
        this.asset = res.data.asset;
        this.balance = this.asset.balance;
      });
    },
    toAdd() {
      uni.navigateTo({
        url: "/pages/mine/wallet/accountList",
      });
    },
    toOrders(type) {
      
      uni.navigateTo({
        url: `/pages/mine/wallet/orders?type=${type}`,
      });
    },
    toDrawCash() {
      if (!this.list.length) {
        return this.toAdd();
      }
      uni.navigateTo({
        url: "/pages/mine/wallet/drawCash",
      });
    },
    toHistory(){
      uni.navigateTo({
            url: '/pages/mine/wallet/drawHistory'
        })
    }
  },
};
</script>
<style lang="less" scoped>
@import url("../../../assets/styles/common.less");
.content {
  padding: 32rpx;
  .brief {
    background: rgba(247, 248, 255, 0.4);
    border-radius: 16rpx;
    border: 2px solid #ffffff;
    padding: 36rpx 48rpx 48rpx 48rpx;
    position: relative;
    .coin {
      width: 160rpx;
      height: 160rpx;
      position: absolute;
      right: 32rpx;
      top: 32rpx;
    }
    .money {
      font-size: 56rpx;
      margin-top: 8rpx;
    }
    .active-btn {
      height: 80rpx;
      margin-top: 42rpx;
    }
    .history{
      position: absolute;
      right:-4rpx;
      top:48rpx;
      background: rgba(255,255,255,0.4);
      padding: 8rpx 24rpx;
      border-radius: 26rpx 0 0 26rpx;
      border: 4rpx solid #ffffff;
    }
  }
  .list {
    padding: 32rpx 40rpx;
    background: #fff;
    border-radius: 16rpx;
    display: flex;
    margin-top: 24rpx;
    // flex:1;
    width: 100%;
    .item {
      flex: 1;
      flex-shrink: 0;
      min-width: 50%;
      &:nth-child(2) {
        position: relative;
        padding-left: 96rpx;
        &::before {
          content: "";
          display: block;
          width: 2px;
          height: 64rpx;
          background: #e9e9ea;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
    .num {
      font-size: 40rpx;
      font-weight: bold;
      margin-bottom: 8rpx;
    }
    .orange {
      color: #f65900;
    }
  }
  .func {
    .item {
      padding: 38rpx 40rpx;
      background: #fff;
      border-radius: 16rpx;
      margin-top: 24rpx;
      .icon {
        width: 48rpx;
        height: 48rpx;
        margin-right: 8rpx;
      }
      .arrow {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
}
</style>
